<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <template>
    <el-header height="15px">乘客信息管理
    </el-header>
    <el-divider></el-divider>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" >
      <el-form-item label="名字" prop="name">
        <el-input v-model="searchForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="searchForm.phone" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectAgain">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" plain @click="deleteByIds" style="margin-left: 60%">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="dialogFormVisible = true" style="margin-left: 80%">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="name"
              label="乘客名字"
              min-width="180">
      </el-table-column>
      <el-table-column
              prop="phone"
              label="手机号码"
              min-width="180">
      </el-table-column>
      <el-table-column
              prop="email"
              label="邮箱地址"
              min-width="180">
      </el-table-column>
      <el-table-column
              prop="idType"
              label="证件类型"
              min-width="180"
              :formatter="formatIdType">
      </el-table-column>
      <el-table-column
              prop="idCard"
              label="证件号"
              min-width="180">
      </el-table-column>
      <el-table-column
              prop="type"
              label="乘客类型"
              min-width="180"
              :formatter="formatType">
      </el-table-column>
      <el-table-column
              align="center"
              label="操作"
              min-width="180"
      >
        <template slot-scope="scope">
          <el-row>
            <el-button type="primary" @click="dialogFormVisible1 = true;handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <div class="block">
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="totalCount"
    >
    </el-pagination>
  </div>

  <el-dialog title="添加乘客"
             :visible.sync="dialogFormVisible" width="40%"
             :close-on-click-modal="false"
             :before-close="cleanModel">
    <el-form ref="createFormRef" :model="createForm" :rules="rules">
      <el-form-item label="乘客姓名" :label-width="'100px'" prop="name">
        <el-input v-model="createForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" :label-width="'100px'" prop="phone">
        <el-input v-model="createForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" :label-width="'100px'" prop="email">
        <el-input v-model="createForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" :label-width="'100px'" prop="idType">
        <el-select v-model="createForm.idType" placeholder="请选择证件类型">
          <el-option
                  v-for="item in idTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号" :label-width="'100px'" prop="idCard">
        <el-input v-model="createForm.idCard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="乘客类型" :label-width="'100px'" prop="type">
        <el-select v-model="createForm.type" placeholder="请选择乘客类型">
          <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cleanModel">取 消</el-button>
      <el-button type="primary" @click="create1">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改车站信息"
             :visible.sync="dialogFormVisible1" width="40%"
             :close-on-click-modal="false"
             :before-close="cleanModel">
    <el-form :model="createForm" :rules="rules">
      <el-form-item label="乘客姓名" :label-width="'100px'" prop="name">
        <el-input v-model="createForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" :label-width="'100px'" prop="phone">
        <el-input v-model="createForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" :label-width="'100px'" prop="email">
        <el-input v-model="createForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" :label-width="'100px'" prop="idType">
        <el-select v-model="createForm.idType" placeholder="请选择证件类型">
          <el-option
                  v-for="item in idTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号" :label-width="'100px'" prop="idCard">
        <el-input v-model="createForm.idCard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="乘客类型" :label-width="'100px'" prop="type">
        <el-select v-model="createForm.type" placeholder="请选择乘客类型">
          <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cleanModel">取 消</el-button>
      <el-button type="primary" @click="update1">确 定</el-button>
    </div>
  </el-dialog>

</div>
</body>

<script src="../../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/request.js"></script>
<script>

  new Vue({
    el: '#app',
    mounted(){
      this.select();
    },
    data() {
      return {
        //activeIndex: '1',
        //activeIndex2: '1',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        pageSize : 15,
        currentPage1 : 1,
        totalCount : 40,
        idTypes:[
          {
            value: 0,
            label: '身份证'
          }, {
            value: 1,
            label: '护照'
          }, {
            value: 2,
            label: '港澳台通行证'
          }
        ],
        types:[
          {
            value: 0,
            label: '成人'
          }, {
            value: 1,
            label: '儿童'
          }, {
            value: 2,
            label: '学生'
          },
           {
            value: 3,
            label: '残疾军人'
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入乘客姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
          ],
          idType: [
            { required: true, message: '请选择证件类型', trigger: 'change' }
          ],
          idCard: [
            { required: true, message: '请输入证件号码', trigger: 'blur' },
            { validator: this.validateIdCard, trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择乘客类型', trigger: 'change' }
          ]
        },
        searchForm : {
          name: '',
          phone: ''
        },
        tableData: [
          {
            id: 10001,
            userId: 20001,
            name: '张三',
            phone: '13800138000',
            email: 'zhangsan@example.com',
            idType: 0,
            idCard: '110101199003072536',
            type: 1
          },
          {
            id: 10002,
            userId: 20001,
            name: '李四',
            phone: '13900139000',
            email: 'lisi@example.com',
            idType: 2,
            idCard: 'E12345678',
            type: 1
          },
          {
            id: 10003,
            userId: 20001,
            name: '王小五',
            phone: '13700137000',
            email: 'wangxiao@example.com',
            idType: 0,
            idCard: '310105201508152426',
            type: 2
          },
          {
            id: 10004,
            userId: 20001,
            name: '赵六',
            phone: '13600136000',
            email: 'zhaoliu@example.com',
            idType: 3,
            idCard: '军字第123456号',
            type: 1
          },
          {
            id: 10005,
            userId: 20001,
            name: '钱七',
            phone: '13500135000',
            email: 'qianqi@example.com',
            idType: 1,
            idCard: 'H12345678',
            type: 1
          },
          {
            id: 10006,
            userId: 20001,
            name: '孙八',
            phone: '13400134000',
            email: 'sunba@example.com',
            idType: 1,
            idCard: 'T12345678',
            type: 1
          },
          {
            id: 10007,
            userId: 20001,
            name: '周九',
            phone: '13300133000',
            email: 'zhoujiu@example.com',
            idType: 0,
            idCard: '440301199102131234',
            type: 3
          },
          {
            id: 10008,
            userId: 20001,
            name: '吴十',
            phone: '13200132000',
            email: 'wushi@example.com',
            idType: 2,
            idCard: 'G87654321',
            type: 1
          }
        ],
        createForm:{
          name: '',
          phone: '',
          email: '',
          idType: 0,
          idCard: '',
          type: 0
        },
        multipleSelection: [],
        selectedIds: []
      }
    },
    methods: {

      create1() {
        this.$refs.createFormRef.validate((valid) => {
          if (valid) {
            // 表单验证通过，执行提交逻辑
            this.create();
          } else {
            // 表单验证失败
            this.$message.error('请检查表单填写是否正确');
            return false;
          }
        });
      },

      update1() {
        this.$refs.createFormRef.validate((valid) => {
          if (valid) {
            // 表单验证通过，执行提交逻辑
            this.update();
          } else {
            // 表单验证失败
            this.$message.error('请检查表单填写是否正确');
            return false;
          }
        });
      },

      formatIdType(row, column, cellValue) {
        const idTypeMap = {
          0: '身份证',
          1: '护照',
          2: '港澳通行证'
        };
        return idTypeMap[cellValue] || '未知类型';
      },
      formatType(row, column, cellValue) {
        const typeMap = {
          0: '成人',
          1: '儿童',
          2: '学生',
          3: '残疾军人'
        };
        return typeMap[cellValue] || '未知类型';
      },

      validateIdCard(rule, value, callback) {
        const idType = this.createForm.idType;
        let pattern = null;

        // 根据证件类型设置不同的验证规则
        switch(idType) {
          case 0: // 身份证
            pattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
            break;
          case 1: // 护照
            pattern = /^[a-zA-Z0-9]{5,20}$/;
            break;
          case 2: // 港澳通行证
            pattern = /^[HMhm]\d{8,10}$/;
            break;
          default:
            callback(new Error('请先选择证件类型'));
            return;
        }

        if (!pattern.test(value)) {
          callback(new Error('证件号码格式不正确'));
        } else {
          callback();
        }
      },

      cleanModel(){
        this.createForm={
          name: '',
          phone: '',
          email: '',
          idType: 0,
          idCard: '',
          type: 0
        };
        this.selectedIds=[];
        this.dialogFormVisible=false;
        this.dialogFormVisible1=false;
      },

      selectAgain(){
        this.currentPage1=1;
        this.select();
      },

      handleCurrentChange(val) {
        this.currentPage1=val;
        this.select();
      },

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index,row){
        this.createForm={
          id: this.tableData[index].id,
          name: this.tableData[index].name,
          phone: this.tableData[index].phone,
          email: this.tableData[index].email,
          idType: this.tableData[index].idType,
          idCard: this.tableData[index].idCard,
          type: this.tableData[index].type
        };
      },
      select(){
        var _this=this;
        axios({
          method:"get",
          url:"http://localhost:8080/passenger/page",
          params: {
            page: this.currentPage1,
            name: this.searchForm.name,
            phone: this.searchForm.phone
          },

        }).then(function (resp) {
          _this.tableData=resp.data.data.records;
          _this.totalCount=resp.data.data.total;
          _this.pageSize=resp.data.data.size;
        })
      },
      create(){
        var _this=this;
        axios({
          method:"put",
          url:"http://localhost:8080/passenger/create",
          data: _this.createForm
        }).then(function (resp) {
          if(resp.data.code === 1){
            _this.$message({
              showClose: true,
              message: '创建成功！',
              type: 'success'
            });
            _this.dialogFormVisible=false;
            _this.cleanModel();
            _this.selectAgain();
          }else {
            _this.$message({
              showClose: true,
              message: resp.data.msg,
              type: 'error'
            });
          }
        });

      },
      deleteById(index,row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = this.tableData[index].id;
          var _this = this;
          axios({
            method: "delete",
            url: "http://localhost:8080/passenger",
            params: { id }
          }).then(function (resp) {
            if (resp.data.code === 1) {
              _this.select();
              _this.$message({
                message: '删除成功！',
                type: 'success'
              });

            }

          })
          this.cleanModel();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteByIds(){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(let i=0;i<this.multipleSelection.length;i++){
            let selectionElement =this.multipleSelection[i];
            this.selectedIds[i]=selectionElement.id;
          }
          var _this=this;
          axios({
            method:"post",
            url:"http://localhost:8080/passenger/deleteByIds",
            data:_this.selectedIds
          }).then(function (resp) {
            if(resp.data.code===1){
              _this.select();
              _this.$message({
                message: '删除成功！',
                type: 'success'
              });
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      update(){
        var _this=this;
        axios({
          method:"put",
          url:"http://localhost:8080/passenger/update",
          data: _this.createForm
        }).then(function (resp) {
          if(resp.data.code === 1){
            _this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success'
            });
            _this.dialogFormVisible1=false;
            _this.cleanModel();
            _this.select();

          }else {
            _this.$message({
              showClose: true,
              message: resp.data.msg,
              type: 'error'
            });
          }
        });

      }
    }
  })
</script>



</html>